<template>
  <page-layout>
    <a-row :gutter="[10, 10]">
      <!-- 顶部区域 -->
      <a-col :span="24">
        <a-card>
          <div class="box-ver-hor-between">
            <div class="primary-color">课程评价</div>
            <div>
              <a-button type="primary" class="mr-20">修改</a-button>
              <a-button type="primary" class="mr-20">邀请修改</a-button>
              <a-button type="primary">申请付款</a-button>
            </div>
          </div>
          <div class="box-ver-hor-between">
            <div>
              <a-button type="link" @click="gotoPage('detail')">详情</a-button>
              <a-button type="link" @click="gotoPage('courseInformation')">课程信息</a-button>
              <a-button type="link" @click="gotoPage('paymentApplication')">付款申请</a-button>
              <a-button type="primary">课程评价</a-button>
            </div>
          </div>
        </a-card>
      </a-col>
      <a-col :span="24">
         <a-card>
           <!-- 列表 -->
           <pro-table
             ref="tableRef"
             :fetch="fetch"
             :columns="columns"
             :operate="operate"
             :pagination="pagination"
           >
           </pro-table>
         </a-card>
      </a-col>
    </a-row>
    <info :visible="state.visibleInfo" @close="closeInfo"></info>
  </page-layout>
</template>
<script>
import info from './info';
import { message , modal} from 'ant-design-vue';
import {useRouter} from "vue-router";
import { tree, remove, removeBatch } from "@/api/module/dept";
import { reactive, createVNode, ref } from 'vue';

export default{
  components: {
    info
  },
  setup(){
    const router = useRouter();
    const gotoPage = (msg) => {
      router.push('/university/professor-manage/'+msg)
    }

    const columns = [
      { dataIndex: "pName", key: "pName", title: "课程名称" },
      { dataIndex: "xmname", key: "xmname", title:"项目名称" },
      { dataIndex: "problem", key: "problem", title: "问题"},
      { dataIndex: "num", key: "num", title: "评价人数"},
      { dataIndex: "score", key: "score", title: "综合评分"}
    ];
    const pagination = {
      Number: 1,
      total: 10,
    }
    /// 行操作
    const operate = [
      { label: "查看", event: function (record) {
        state.visibleInfo = true,
        state.recordInfo = record
      }},
    ];
    const state = reactive({
      selectedRowKeys: [],
      param: {},
      visibleSave: false,
      visibleEdit: false,
      visibleInfo: false,
      recordEdit: {},
      recordInfo: {},
    })
    /// 数据来源 [模拟]
    const fetch = async (param) => {
      var response = await tree(param);
      return {
        total: response.data.total,
        data: [{
          pName : '经济学',
          xmname : '成都校区',
          problem : '3243243234',
          num : '50',
          score : '3.2',
        }]
      };
    };
    const closeInfo = function() {
      state.visibleInfo = false
    }
    return{
      state,
      gotoPage,
      columns,
      operate,
      pagination,
      fetch,
      closeInfo,
    }
  }

}
</script>
